<template>
    <base-node type="var_set" :config="props.data" :id="props.id" ref="baseNode">
        <template #default>
            <div @mousedown.stop @wheel.stop>
                <div class="flex justify-between mb-1.5">
                    <label>全局变量设置</label>
                    <n-button strong secondary type="success"  @click="addVariable">
                        <jb-icon :local="true" icon="jam:plus-circle"></jb-icon>
                        添加变量
                    </n-button>
                </div>
                <div v-if="props.data.varSetConfig.vars.length === 0" class="empty-state">
                    尚未设置任何变量，点击"添加变量"按钮来添加第一个变量。
                </div>
                <div v-else class="variables-container">
                    <div v-for="(variable, index) in props.data.varSetConfig.vars" :key="index" class="variable-row">
                        <div class="var-inputs">
                            <div class="var-name-field">
                                <n-select
                                    v-model:value="variable.name"
                                    :options="prevOutputFieldOptions"
                                    filterable
                                    tag
                                    placeholder="变量名"
                                    size="small"
                                />
                            </div>
                            <div class="var-desc-field">
                                <n-input
                                    v-model:value="variable.value"
                                    placeholder="变量值"
                                    size="small"
                                />
                            </div>
                        </div>
                        <jb-btn confirmText="确认删除该设置吗？"  :icon="Icons.REMOVE" quaternary type="error" size="small" class="delete-btn" @confirm="removeVariable(index)"></jb-btn>
                    </div>
                </div>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="success" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 30px))" />
            <Handle type="source" id="fail" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% + 30px))" />
        </template>
    </base-node>
</template>
<script setup>
import {
    Position,
    Handle,
    useNode
} from '@vue-flow/core'
import {
    ref, watch,
    onMounted, computed,
} from "vue";
import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";
import {Icons} from "@/constants/index.js";
const baseNode = ref(null);
const props = defineProps(['id', 'data']) //默认配置



// 添加变量
const addVariable = () => {
    props.data.varSetConfig.vars.push({
        name: '',
        description: ''
    });
};

// 删除变量
const removeVariable = (index) => {
    props.data.varSetConfig.vars.splice(index, 1);
};

/** 获取所有前置节点的输出字段，并生成下拉选项 */
const prevOutputFieldOptions = computed(() => {
    return baseNode.value ? baseNode.value.prevOutputFieldOptions : [];
});

</script>

<style scoped lang="scss">
.variables-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
}

.variable-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;

    &:last-child {
        margin-bottom: 0;
    }
}

.var-inputs {
    flex: 1;
    display: flex;
    gap: 8px;
}

.var-name-field {
    width: 40%;
}

.var-desc-field {
    width: 60%;
}

.delete-btn {
    flex-shrink: 0;
}

.empty-state {
    color: #888;
    text-align: center;
    padding: 16px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    margin-bottom: 8px;
}
</style>